<template>
	<view>
		<form @submit="formSubmit">
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>商品名称</view>
						<view class='input'><input type='text' name='store_name' :value='productInfo.store_name'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>商品分类</view>
						<view class="address">
							<picker mode="multiSelector" @change="bindRegionChange"
									@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
								<view class='acea-row'>
									<view class="picker">{{region[0]}}，{{region[1]}}</view>
								</view>
							</picker>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>商品轮播图</view>
						<view class='pictrue' v-for="(item,index) in pics" :key="index">
							<image :src='item'></image>
							<text class='iconfont icon-guanbi1 font-num' @click='DelPic(index)'></text>
						</view>
						<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic(2)'
							  v-if="pics.length < 8">
							<text class='iconfont icon-icon25201'></text>
							<view>上传图片</view>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>售价</view>
						<view class='input'><input type='text' name='price' :value='productInfo.price'></input>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>原价</view>
						<view class='input'><input type='text' name='ot_price' :value='productInfo.ot_price'></input>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>运费</view>
						<view class='input'><input type='text' name='postage' :value='productInfo.postage'></input>
						</view>
					</view>

					<view class='item acea-row row-between-wrapper'>
						<view>商品详情</view>
						<robin-editor class="editor"
									  @save="saveEditor"
									  v-model="html"
									  :imageUploader="uploadImg"
									  :muiltImage="true">
						</robin-editor>
					</view>
				</view>

				<button class='modifyBnt bg-color' formType="submit">保存</button>
			</view>
		</form>
		<canvas canvas-id="canvas" v-if="canvasStatus" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>

	</view>
</template>

<script>
	import {
		getProductCategories,
	} from '@/api/merchant.js';
	import {
		getSecondHandProduct,
		productEdit,
	} from '@/api/second_hand.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	export default {
		components: {

		},
		mixins: [colors],
		data() {
			return {
				type: '',
				html: '',
				pics: [],
				productInfo: {},
				canvasWidth: "",
				canvasHeight: "",
				canvasStatus: false,
				fileSizeString: '',
				options: {},
				cate_id:0,
				categories: [],
				region: ['请选择','请选择'],
				valueRegion: [0, 0, 0],
				multiArray: [],
				multiIndex: [0, 0, 0],
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						// this.getProductCategories();
					}
				},
				deep: true
			}
		},
		onLoad(option) {
			if (this.isLogin) {
				this.type = option.type;
				if(option.type === 'edit'){
					this.getSecondHandProduct(option.id);
				}

				this.getProductCategories();
			} else {
				toLogin();
			}
		},
		methods: {
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					console.log(res.context)
					// this.editorCtx = res.context
				}).exec()
				// #endif
			},

			/**
			 * 获取商户单个产品
			 */
			getSecondHandProduct(id){
				getSecondHandProduct(id).then(res => {
					this.productInfo = res.data.productInfo;
					this.pics = res.data.productInfo.slider_image;
					this.html = res.data.productInfo.description;

					this.region = [];
					let cate_name = res.data.productInfo.cate_name.split(',');
					this.region.push(cate_name[0]);
					this.region.push(cate_name[1]);
				});
			},

			/**
			 * 获取商品分类
			 */
			getProductCategories(){
				getProductCategories().then(res => {
					this.categories = res.data;

					this.setProduct();
				});
			},

			//初始化分类
			setProduct() {
				let that = this,
					one = [],
					two = [],
					three = [];

				that.categories.forEach((item, i) => {
					one.push(item.cate_name);
					if (item.cate_name === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});

				if(that.categories[this.valueRegion[0]].children){
					that.categories[this.valueRegion[0]].children.forEach((item, i) => {
						if (this.region[1] == item.children) {
							this.valueRegion[1] = i
							this.multiIndex[1] = i
						}
						two.push(item.cate_name);
					});
				}

				if(that.categories[this.valueRegion[0]].children[this.valueRegion[1]].children){
					that.categories[this.valueRegion[0]].children[this.valueRegion[1]].children.forEach((item, i) => {
						if (this.region[2] == item.children) {
							this.valueRegion[2] = i
							this.multiIndex[2] = i
						}
						three.push(item.cate_name);
					});
				}

				this.multiArray = [one, two, three]

				console.log(this.multiArray)
				console.log(this.multiIndex)
			},

			//选定分类
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
						one = this.categories[multiIndex[0]] || {
							children: []
						},
						two = one.children[multiIndex[1]] || {
							v: 0
						},
						multiArray = this.multiArray,
						value = e.detail.value;

				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.valueRegion = [0, 0, 0]
				this.setProduct();

				console.log(this.multiIndex)
			},

			//选项滚动
			bindMultiPickerColumnChange: function(e) {
				let that = this,
						column = e.detail.column,
						value = e.detail.value,
						currentTwo = that.categories[value] || {
							children: []
						},
						multiArray = that.multiArray,
						multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let threeList = currentTwo.children[0] || {
							children: []
						};
						if(currentTwo.children){
							multiArray[1] = currentTwo.children.map((item) => {
								return item.cate_name;
							});
						}

						if(threeList.children){
							multiArray[2] = threeList.children.map((item) => {
								return item.cate_name;
							});
						}
						break;
					case 1:
						let twoList = that.categories[multiIndex[0]].children[multiIndex[1]].children || [];
						multiArray[2] = twoList.map((item) => {
							return item.cate_name;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex

				console.log(this.multiArray)
				console.log(this.multiIndex)
			},


			//富文本相关
			uploadImg: function(img, callback) {
				//上传图片逻辑,将图片链接传给回调函数
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					console.log(res.data.url)
					callback(res.data.url)
				});
			},
			saveEditor: function(e) {
				// v-model已实现赋值
				this.html = e.html;
				this.$util.Tips({
					title: '详情保存成功，请继续编辑或点击最下面的保存提交产品！'
				});
			},


			/**
			 * 删除图片
			 *
			 */
			DelPic: function(index) {
				let that = this,
					pic = this.pics[index];
				that.pics.splice(index, 1);
				that.$set(that, 'pics', that.pics);
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic(type) {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					that.pics.push(res.data.url);
					this.canvasStatus = false
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},

			/**
			 * 提交修改
			 */
			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.store_name && !that.productInfo.store_name) return that.$util.Tips({
					title: '商品名称不能为空'
				});
				if (!value.price && !that.productInfo.price) return that.$util.Tips({
					title: '售价不能为空'
				});
				if (!value.ot_price && !that.productInfo.ot_price) return that.$util.Tips({
					title: '原价不能为空'
				});
				if (!that.multiArray) return that.$util.Tips({
					title: '商品分类不能为空'
				});
				if (!that.pics) return that.$util.Tips({
					title: '商品轮播图不能为空'
				});
				if (!that.html) return that.$util.Tips({
					title: '商品详情不能为空'
				});


				value.cate_name = that.region;
				value.slider_image = that.pics;
				value.image = that.pics[0];
				value.description = that.html;

				if(that.type === 'edit'){
					value.id = that.productInfo.id;
					value.mer_id = that.productInfo.mer_id;
				}else{
					value.id = 0;

					let user = this.$Cache.get('new_user_info')
					value.mer_id = JSON.parse(user).merchant.id;
				}
				productEdit(value).then(res => {
					return that.$util.Tips({
						title: res.msg,
					}, {
						tab: 5,
						url: '/pages/second_hand/products?is_show=2'
					});
				}).catch(msg => {
					return that.$util.Tips({
						title: msg || '保存失败，您并没有修改'
					}, {
						tab: 3,
						url: 1
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.cartcolor {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}

	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: #e93323;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid #e93323;
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 15rpx 30rpx 15rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 100rpx;
		height: 100rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}

	.avatar-box {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.pictrue {
		width: 140rpx;
		height: 140rpx;
		margin: 0 0 35rpx 25rpx;
		position: relative;
		font-size: 22rpx;
		color: #bbb;
	}

	.pictrue:nth-last-child(1) {
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}

	.pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 3rpx;
	}

	.pictrue .icon-guanbi1 {
		font-size: 45rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.pictrue .icon-icon25201 {
		color: #bfbfbf;
		font-size: 50rpx;
	}

	.editor{
		width: 100%;
	}
</style>
